<!DOCTYPE html>
<html>

	<head>
		<title>OpenAuth.net官方网站 - 最好用的.net权限工作流框架|.net core快速开发框架|.net core权限管理|.net core工作流</title>
  		<meta name="Keywords" content="openauth.net,.net开源工作流,.NET开源权限管理">
  		<meta name="Description" content="最好用的.net开源工作流框架,最好用的.NET开源权限管理框架">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<link rel="stylesheet" href="../../css/element-ui.css">
		<link href="../../font/css/font-awesome.min.css" rel="stylesheet">
		<link rel="stylesheet" href="../../css/common.css">
		<link rel="stylesheet" href="../../css/question/index.css">
	</head>

	<body>
		<div id="app" v-cloak>
			<el-container>
				<el-header class="box-flex align-center">
					<app-header :current="current"></app-header>
				</el-header>
				<el-main>
					<div class="container m-t-lllg">
						<el-card class="login" shadow="never">
							<div slot="header" class="clearfix">
								<span>我的消息</span>
								<el-button style="float: right; padding: 3px 0" class="color-danger" type="text" @click="deleteAll">删除所有</el-button>
							</div>
							<div class="card-body p-m">
								<div class="box-flex align-center align-stretch message-list" v-for="item in messages">
									<div class="left-body flex-1 box-flx flex-column">
										<div class="name">{{item.content}}</div>
										<div class="time">【{{item.type}}】{{item.fromname}}/{{item.time}}</div>
									</div>
									<div class="right-editor box-flx flex-end">
										<el-button type="text" @click="deleteOne(item)" class="color-danger">删除</el-button>
									</div>
								</div>
								<div class="empty" v-if="messages.length===0">
									暂无消息
								</div>
								<el-pagination style="margin:10px 0" v-if="total>10" @current-change="updateIndex" background layout="prev, pager, next" :total="total"></el-pagination>
							</div>
						</el-card>
					</div>
				</el-main>
				<el-footer height="100px">
					<app-footer></app-footer>
				</el-footer>
			</el-container>
		</div>

	</body>
	<!-- import Vue before Element -->
	<script src="../../js/vue.js"></script>

	<!-- import JavaScript -->
	<script src="../../js/element-ui.js"></script>
	<script src="../../js/axios.js"></script>
	<script src="../../js/header.js"></script>
	<script src="../../js/footer.js?v=2"></script>
	<script src="../../js/common.js"></script>
	<script>
		new Vue({
			data() {
				return {
					current: "message",
					messages: [],
					total: 0,
					search: {
						index: 1,
						size: 10
					}
				}
			},
			created() {
				this.getList()
			},
			methods: {
				getList() {
					service({
						url: '/message/get',
						method: 'post',
						data: {
							"index": this.search.index,
							"size": this.search.size,
							"type": this.search.type
						}
					}).then((res) => {
						this.messages = res.data.objects
						this.total = res.data.total
					})
				},
				linkDetail(id) {
					window.location.href = "detail.html?id=" + id
				},
				updateIndex(e) {
					this.search.index = e
					this.getList()
				},
				deleteAll() {
					this.$confirm('确认要删除所有信息吗?', '删除所有', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						service({
							url: '/message/clear',
							method: 'post',
						}).then((res) => {
							this.messages = []
							this.total = 0
							this.$notify.success({
								title: '删除成功',
							})
						})
					})
				},
				deleteOne(e) {
					var data = {
						id: e.id
					}
					this.$confirm('确认要删除概信息吗?', '删除信息', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						service({
							url: '/message/del',
							method: 'post',
							data: data
						}).then((res) => {
							var index = this.messages.indexOf(e)
							this.messages.splice(index, 1)
							this.$notify.success({
								title: '删除成功',
							})
						})
					})
				}

			}
		}).$mount('#app')
	</script>

</html>